<template>
    <div class="recommend" @scroll="binscroll">
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        >
            <div class="my-container" :style="{backgroundColor}">
                <div class="banner-box-swiper" >
                    <swiper
                        v-if="carouselList.length > 1"
                        :options="swiperOption"
                        ref="mySwiper"
                        style="height: 180px"
                    >
                        <swiper-slide
                        class="swiper-slide"
                        v-for="item in carouselList"
                        :key="item.id"
                        >
                        <img :src="item.img" alt="" @click="goto(item)" />
                        </swiper-slide>
                    </swiper>
                </div>
            </div>
            <div class="recommendCont">
                <manhua @isShow="isShow" v-for="(item,i) in content.data" :key="i" :data="item" />
            </div>
            <van-action-sheet
              v-model="show"
              :actions="actions"
              cancel-text="取消"
              close-on-click-action
              :get-container="getContainer"
              @select="binSelect"
            />
        </van-list>
    </van-pull-refresh>
    </div>
</template>
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
import store from '@/store'
import manhua from '@/components/ManHuaItem.vue'
let vm = null
export default {
  components: {
    swiper,
    swiperSlide,
    manhua
  },
  data() {
    return {
        //弹出层内容
        actions:[{name:'加入书架稍后再看'},{name:'不感兴趣'}],
        //漫画内容
        content:{
          num:1,
          data:[]
        },
        //弹出层状态
        show:false,
        //下拉加载状态
        isLoading: false,
        //触底加载状态
        loading: false,
        //无加载状态
        finished: false,
        //轮播内容
        carouselList: [],
        active: 0,
        carouselIndex: 0,
        // 异形轮播图配置
        swiperOption: {
        observer:true,//修改swiper自己或子元素时，自动初始化swiper
        observeParents:true,//修改swiper的父元素时，自动初始化swiper
        effect: 'coverflow',
        coverflowEffect: {
          rotate: 0, // slide做3d旋转时Y轴的旋转角度 (默认50).
          stretch: -30, // 每个slide之间的拉伸值 越大slide靠得越紧.
          depth: 150, // slide的位置深度 值越大z轴距离越远 看起来越小.
          modifier: 1, // depth和rotate和stretch的倍率 相当于(depth*modifier、rotate*modifier、stretch*modifier) 值越大这三个参数的效果越明显(默认1).
          slideShadows: false // 开启slide阴影 (默认 true)
        },
        // 默认选中中间一张
        centeredSlides: true,
        // 无限循环
        loop: true,
        // 自动轮播
        autoplay: {
          delay: 5000,
          stopOnLastSlide: false,
          disableOnInteraction: false
        },
        slideToClickedSlide: true,
        on: {
          slideChange: function () {
            vm.carouselIndex = this.realIndex
            vm.backgroundColor = vm.carouselList[this.realIndex].bg
          }
        },
        loopedSlides: 2,
      },
      backgroundColor:'#fff'
    }
  },
  created() {
    vm = this
    this.axios({
        url:'HomeRecommend'
    }).then((res)=>{
        if (res.status === 200) {
            this.content.data = res.data.data.list
        }
    })
  },
  watch:{
      'backgroundColor':(n)=>{
        let isTop = store.state.header.isTop
        if (isTop) {
          store.commit('setBackground',n)
        }
      }
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper
    }
  },
  mounted() {
    this.getCarouselList()
  },
  methods: {
    // 轮播图
    getCarouselList() {
        this.axios({
            url: 'Banner',
        }).then((res)=>{
            this.carouselList = res.data.data
        })
    },
    //下拉加载
    onRefresh() {
      let num = this.content.num
      this.axios({
        url:'HomeFeed',
        params:{
          pageNum:num,
          pageSize:20,
        }
        }).then((res)=>{
            if (res.status === 200) {
              if (res.data.data.feeds.length<20) {
                this.$toast('没有更多内容');
                this.isLoading = false;
                return
              }
              this.$toast('刷新成功');
              this.isLoading = false;
              
              this.content.data=res.data.data.feeds
              this.content.num++
            }
        }).catch(err =>{
                
            })
    },
    //触底加载
    onLoad() {
      if (this.content.length === 0) {
        this.loading = false;
        return
      }
      let num = this.content.num
      this.axios({
        url:'HomeFeed',
        params:{
          pageNum:num,
          pageSize:20,
        }
        }).then((res)=>{
            if (res.status === 200) {
                this.content.data.push(...res.data.data.feeds) 
                this.loading = false;
                this.content.num++
                if (res.data.data.feeds.length < 20) {
                  this.finished = true;
                }
            }
        }).catch(err =>{
                
            })
    },
    //弹出层状态
    isShow(v){
      this.show = true;
      
    },
    //挂载home节点
    getContainer() {
      return document.querySelector('.home');
    },
    //弹出层选项点击
    binSelect(v,i){
      
    },
    //滚动条事件
    binscroll(e){
      if (e.target.scrollTop === 0) {
        store.commit('setIsTop',true)
        store.commit('setColor','#fff')
        store.commit('setBackground',this.carouselList[this.carouselIndex].bg)
      } else {
        store.commit('setIsTop',false)
        store.commit('setColor','#000')
        store.commit('setBackground','#fff')
      }
    },
    goto(item){
      if (item.jump_type===2) {
        let reg = /\d.*\//g
        let text  = reg.exec(item.jump_value)
        text = text[0].slice(0,text[0].length-1)
        this.$router.push({name:'CartoonContainer',query:{id:text}})
      }else if (item.jump_type===3) {
        this.$router.push({name:'activityCont',query:{src:item.jump_value,title:item.title}})
      }
    }
  }
}
</script>
<style lang="less" scoped>
.recommend{
  width: 100%;
  height: calc(100vh - 94px);
  overflow-y: auto;
}
.box{
      width: 100%;
      height: 100%;
      padding: 0 10px;
  }
.my-container {
  // width: 375px;
  width:100%;
  box-sizing: border-box;
  transition: background-color .5s;
  .banner-box-swiper {
    transition: 500ms;
    width: 100%;
    height: 180px;
    overflow: hidden;
    .swiper-container {
      height: 280px;
      width: 290px;
      overflow: visible;
      position:relative;
      top:50%;
      transform:translate(0,-50%);
      .swiper-slide {
        text-align: center;
        background: #fff;
        transition: 500ms;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
          img {
            width: 100%;
            height: 100%;
            display: block;
          }
      }
    }
  }
}
.recommendCont{
    padding: 0 10px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    background-color: #fff;
    flex-wrap: wrap;
}
</style>